<template>
	<view class="order-details-container">
		<view class="order-details">
			<view v-if="orderType === 1 && hasCamera === '1'">
				<view class="item-title row">
					<text class="line"></text>
					<view class="row">
						<text class="bold lg">厨房监控</text>
					</view>
				</view>
				<view class="row-center"><button @tap="showVideo" class="show-btn">视频直播</button></view>
			</view>
			<view v-if="orderType === 2 && orderDetail.status === 3">
				<view class="item-title row">
					<text class="line"></text>
					<view class="row">
						<text class="bold lg">核销码</text>
					</view>
				</view>
				<view class="row-center">
					<image class="code-wrap" :src="qrcodeURL"> </image>
				</view>
				<view class="item-title row">
					<text class="line"></text>
					<view class="row">
						<text class="bold lg">配送员定位</text>
					</view>
				</view>
				<image class="position-wrap"
					src="https://yummy-1313547949.cos.ap-guangzhou.myqcloud.com/miniPro/position-icon.jpg">
				</image>
			</view>
			<view v-if="orderType === 5">
				<view class="row-center fund-title">退款成功！</view>
				<view class="item-wrap">
					<view class="row-between"><text class="label">申请退款时间：</text>{{orderDetail.applyRefundTimeStr || ''}}
					</view>
					<view class="row-between"><text class="label">退款时间：</text>{{orderDetail.refundTimeStr||''}}
					</view>
				</view>
			</view>
			<view class="item-title row">
				<text class="line"></text>
				<view class="row">
					<text class="bold lg">配送信息</text>
				</view>
			</view>
			<view class="item-wrap">
				<view class="row-between mb10">
					<view>
						<text class="label">称呼：</text>
						<text>{{address.nickName}}</text>
					</view>
					<text class="mobile">{{address.mobile}}</text>
				</view>
				<view class="row"><text class="label">大厦名称：</text>{{address.mansionName}}</view>
				<view class="row"><text class="label">门牌号：</text>{{address.houseNumber}}
				</view>
				<view class="row"><text class="label">公司全称：</text>{{address.companyName}}</view>
			</view>
			<view class="item-title row">
				<text class="line"></text>
				<view class="row">
					<text class="bold lg">订单信息</text>
				</view>
			</view>
			<view class="item-wrap">
				<view class="mb10"><text class="label">订单编号：</text>{{orderDetail.orderNo}}</view>
				<view><text class="label">套餐日期：</text>{{orderDetail.createTimeStr || ''}}</view>
			</view>
			<view class="item-title row">
				<text class="line"></text>
				<view class="row">
					<text class="bold lg">套餐信息{{orderDay}}</text>
				</view>
			</view>
			<order-goods :list="mealList"></order-goods>
		</view>
		<loading-view v-if="isFirstLoading"></loading-view>
		<u-modal v-model="showModal" title="订单已送达" :show-cancel-button="true" content="祝您用餐愉快" confirm-color="#ff2c3c">
		</u-modal>
		<!-- <loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
		<float-tab></float-tab> <j-video :url="url" height="300rpx" width="100%"></j-video>-->
	</view>
</template>

<script>
	import {
		getOrderDetail
	} from '@/api/order';
	import Cache from '@/utils/cache'
	import qrCode from '@/utils/weapp-qrcode'
	export default {
		data() {
			const {
				hasCamera
			} = Cache.get('_CONFIG')
			return {
				orderType: -1,
				orderDetail: {},
				orderDay: '',
				mealList: [],
				isFirstLoading: true,
				address: {},
				hasCamera,
				qrcodeURL: '',
				accessToken: '',
				timeout: 0,
				showModal: false
			};
		},
		onLoad: function(options) {
			this.id = options.id;
			this.orderType = parseInt(options.order_type)
			this.getOrderDetailFun();
			this.getAccessToken()
		},
		onUnload: function() {
			clearTimeout(this.timeout)
		},
		methods: {
			onRefresh() {
				uni.$emit("refreshorder")
				const {
					type
				} = this
				if ([0, 2].includes(type)) {
					clearTimeout(this.timeout)
					this.getOrderDetailFun();
				} else if (type == 1) {
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			},
			initQrCode(text) {
				this.qrcodeURL = qrCode.drawImg(text, {
					typeNumber: 4,
					errorCorrectLevel: 'M',
					size: 500
				})
			},
			getOrderDetailFun() {
				getOrderDetail(this.id).then(res => {
					if (res.code == 200) {
						const {
							address,
							mealList,
							...orderDetail
						} = res.data
						this.orderDetail = orderDetail
						this.address = address
						this.mealList = mealList
						const date = new Date(orderDetail.createTimeStr)
						this.orderDay =
							`（${date.getMonth() + 1}月${date.getDate()}日·星期${['天','一','二','三','四','五','六'][date.getDay()]}）`
						// 配送中的订单
						if (this.orderType === 2) {
							if (Number(orderDetail.status) === 5) {
								this.showModal = true
							} else {
								this.initQrCode(JSON.stringify((orderDetail)))
								this.timeout = setTimeout(() => {
									this.getOrderDetailFun()
								}, 2 * 1000)
							}
						}

					} else {
						setTimeout(() => uni.navigateBack(), 1500)
					}
					this.$nextTick(() => {
						this.isFirstLoading = false
					});
				}).catch(() => {
					this.$toast({
						title: "请不要过快操作",
					})
					setTimeout(() => uni.navigateBack(), 1500)
				});
			},
			getAccessToken() {
				const _this = this
				uni.request({
					url: 'https://open.ys7.com/api/lapp/token/get',
					method: 'POST',
					data: {
						appKey: "fbf51320400340ad90b2848669dd6c82",
						appSecret: '1692407abdc4afd4a22407d69ae86934'
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function success({
						data: {
							data,
							code,
							msg
						}
					}) {
						if (code === '200') {
							_this.accessToken = data.accessToken
						} else {
							_this.$toast({
								title: msg || "获取视频信息失败",
							})
						}
					}
				})
			},
			showVideo() {
				const _this = this
				wx.openEmbeddedMiniProgram({
					appId: 'wxf2b3a0262975d8c2',
					path: '/pages/live/live?accessToken=' + _this.accessToken +
						'&deviceSerial=L16121802&channelNo=1&modelType=simple',
					fail() {
						_this.$toast({
							title: "获取视频信息失败"
						})
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	.order-details-container {
		position: relative;
		height: 100%;

		&::before,
		&::after {
			content: '';
			position: fixed;
			z-index: 19;
			top: 0;
			width: 100%;
			height: 20rpx;
			background-color: #FFCC46;
		}

		&::after {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
		}
	}

	.order-details {
		padding: 20rpx;
		position: relative;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.show-btn {
			width: 40%;
			border: 1px solid #FF8F00;
			border-radius: 50rpx;
			color: #FF8F00;
		}

		.label {
			font-weight: 500;
			font-size: 26rpx;
			color: #4A4A4A;
		}

		.item-title {
			color: #FF8F00;
			font-family: PingFangSC-Semibold, PingFang SC;

			.line {
				margin: 20rpx;
				width: 8rpx;
				height: 28rpx;
				background-color: #FFCC46;
				border-radius: 4rpx;
				color: #FFCC46;
			}
		}

		.video-wrap,
		.item-wrap {
			background-color: rgba(247, 247, 247, 1);
			border-radius: 20rpx;
		}

		.item-wrap {
			margin-bottom: 20rpx;
			padding: 28rpx;
			font-size: 26rpx;
			color: #4A4A4A;

			>view {
				margin-bottom: 10rpx;
			}
		}

		.code-wrap {
			width: 350rpx;
			height: 350rpx;
			background-color: #F7F7F7;
		}

		.fund-title {
			margin: 20rpx;
			color: #4A4A4A;
			font-size: 44rpx;
		}

		.position-wrap {
			height: 344rpx;
			width: 100%
		}
	}
</style>
